<template>
    <div class="wh-100 px-12 overflow-auto pb-60" style="background-color:#fff;">
        <!--头部-->
        <div class="w-100 d-flex-between-center px-12 fs-16 h_60p">
            <span class="fw-6" style="color:#5b5b5b;">{{ chapterContentList.title }}</span>
            <span class="fs-14" style="color:rgba(160, 160, 160);">发布人：{{ chapterContentList.enterpriseAttnName }} 发布时间：{{ chapterContentList.publishTime }}</span>
        </div>
        <!--职位概览-->
        <div class="w-100 " style="height: 450px;border: 1px solid #d1d1d1;border-radius: 10px" v-loading="boxloading1">
            <div class="w-100 px-24 fs-16 fw-6 titleStyle h_40p lh_40p" style="border-bottom: 1px solid #d1d1d1;">
                职位概览
            </div>
            <div class="w-100 d-flex  fs-16 titleItemStyle overflow-hidden" style="color: rgba(51, 51, 51)">
                <div class="w-50 h-100 overflow-scroll" style="border-right: 1px solid #d1d1d1">
                    <div class="wh-100 px-28 ">
                        <div class="wh-100">
                            <div class=" w-100 pt-12">
                                <div class=" d-flex" style="color: rgba(51, 51, 51, 0.8)">
                                    职位名称
                                    <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.positionName }}</div>
                                </div>
                                <div class=" d-flex job-overview" style="color: rgba(51, 51, 51, 0.8)">
                                    学历要求
                                    <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.education }}</div>
                                </div>
                            </div>
                            <div class=" w-100">
                                <div class=" d-flex job-overview" style="color: rgba(51, 51, 51, 0.8)">
                                    职位类别
                                    <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.positionType }}</div>
                                </div>
                                <div class=" d-flex job-overview" style="color: rgba(51, 51, 51, 0.8)">
                                    工作城市
                                    <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.workCity }}</div>
                                </div>
                            </div>
                            <div class=" w-100">
                                <div class=" d-flex job-overview" style="color: rgba(51, 51, 51, 0.8)">
                                    工作性质
                                    <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.workNature }}</div>
                                </div>
                                <div class=" d-flex job-overview" style="color: rgba(51, 51, 51, 0.8)">
                                    招聘人数
                                    <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.recruitNum }}</div>
                                </div>
                            </div>
                            <div class=" w-100">
                                <div class=" d-flex job-overview" style="color: rgba(51, 51, 51, 0.8)">
                                    月薪范围
                                    <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.salaryRange }}</div>
                                </div>
                                <div class=" d-flex job-overview" style="color: rgba(51, 51, 51, 0.8)">
                                    招聘单位
                                    <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.recruitUnit }}</div>
                                </div>
                            </div>
                            <div class=" d-flex mt-12" style=";grid-column: 1;color: rgba(51, 51, 51, 0.8)">
                                专业要求
                                <div class="ml-24" style="color: rgba(51, 51, 51)">{{ chapterContentList.major === '' ? '暂无' : chapterContentList.major }}</div>
                            </div>
                            <div class=" mt-12" style=";grid-column: 1;color: rgba(51, 51, 51, 0.8)">技能标签</div>
                            <div class=" d-flex text-center overflow-auto mt-8 skillTag" style="">
                                <div v-for="item in chapterContentList.skill" class="mr-12 skillTagItem" style="">
                                    {{ item.length && item.length > 0 ? item : '暂无' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-50 h-100 pt-12  overflow-scroll" style="">
                    <div class=" w-100 h-75  d-flex ">
                        <div class=" flex-1 h-100 " style="">
                            <div class="d-flex-align-center h-10 ">
                                <div class="mr-16 w-20 text-right ">招聘单位</div>
                                <div class="mr-16">{{ enterpriseDetail.unitName || '暂无' }}</div>
                            </div>
                            <div class="d-flex-align-center h-10 mt-8">
                                <div class="mr-16 w-20 text-right ">所属行业</div>
                                <div class="mr-16 ">{{ enterpriseDetail.unitIndustry || '暂无' }}</div>
                            </div>
                            <div class="d-flex-align-center h-10 mt-8">
                                <div class="mr-16 w-20 text-right ">网签所属行业</div>
                                <div class="mr-16 ">{{ enterpriseDetail.netsignIndustry || '暂无' }}</div>
                            </div>
                            <div class="d-flex-align-center h-10 mt-8">
                                <div class="mr-16 w-20 text-right ">业务涉及领域</div>
                                <div class="mr-16 w-70  ">{{ enterpriseDetail.businessField || '暂无' }}</div>
                            </div>
                            <div class="d-flex-align-center h-10 mt-8">
                                <div class="mr-16 w-20 text-right">单位类型</div>
                                <div class="mr-16 ">{{ enterpriseDetail.unitType || '暂无' }}</div>
                            </div>
                            <div class="d-flex-align-center h-10 mt-8">
                                <div class="mr-16 w-20 text-right">单位性质</div>
                                <div class="mr-16 ">{{ enterpriseDetail.unitQuality || '暂无' }}</div>
                            </div>
                            <div class="d-flex-align-center h-10 mt-8">
                                <div class="mr-16 w-20 text-right">单位地址</div>
                                <div class="mr-16 ">
                                    <div v-if="enterpriseDetail.locationProvince || enterpriseDetail.locationCity || enterpriseDetail.fullAddress" class="mr-16 job-overview">
                                        {{ enterpriseDetail.locationProvince || '' }}{{ enterpriseDetail.locationCity || '' }}{{ enterpriseDetail.fullAddress || '' }}
                                    </div>
                                    <div v-else class="mr-16 ">暂无</div>
                                </div>
                            </div>
                            <div class="d-flex-align-center h-10 mt-8">
                                <div class="mr-16 w-20 text-right">官网地址</div>
                                <div class="mr-16 ">{{ enterpriseDetail.officialWebsite || '暂无' }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="enterpriseDetail.introduction" class="w-100 mt-12  fs-16" style="border: 1px solid #d1d1d1;border-radius: 10px;" v-loading="boxloading2">
            <div class="w-100 px-24  fs-16 fw-6 h_40p lh_40p" style="border-bottom: 1px solid #d1d1d1;">
                公司简介
            </div>
            <div class="w-100 px-20 overflow-auto">
                <div class="mr-16 job-overview" :class="!info_open ? 'infor_height' : 'infor_init_heignt'">
                    {{ enterpriseDetail.introduction || '暂无' }}
                </div>
                <div v-if="!info_open" class="text-center pt-16" @click="openOrClose">--折叠--</div>
                <div v-else class="text-center pt-16" style="background-color: white" @click="openOrClose">--展开--</div>
            </div>
        </div>
        <!--职位描述-->
        <div class="w-100 mt-12 fs-16" style="height: 350px;border: 1px solid #d1d1d1;border-radius: 10px;" v-loading="boxloading2">
            <div class="w-100 px-24 fs-16 fw-6 h_40p lh_40p" style="border-bottom: 1px solid #d1d1d1;">
                职位描述
            </div>
            <div class="w-100 fs-16" style="height: calc(100% - 50px )">
                <div class="wh-100 py-20 px-28 overflow-auto">
                    <!--          <pre>{{chapterContentList. positionDesc}}</pre>-->
                    <div class=" " v-if="chapterContentList.positionDesc" v-html="chapterContentList.positionDesc" style="white-space:pre-wrap"></div>
                    <div class=" " v-else>暂无数据</div>
                </div>
            </div>
        </div>
        <!--审核情况-->
        <div class="w-100" v-loading="boxloading3">
            <div class="px-28 fs-16 fw-6 h_40p lh_40p" style="border-bottom: 1px solid #e5e5e5">
                审核情况
            </div>
            <div class="mt-12 fs-16 px-28">
                <div>证明材料</div>
                <div class="my-12">
                    <el-image
                        class="ml-12 mr-28 h_200p w_200p"
                        :src="auditList.enterpriseSupportingMaterial"
                        alt="单位证件"
                        :preview-src-list="[auditList.enterpriseSupportingMaterial, auditList.attnSupportingMaterial]"
                    >
                        <div slot="error" class="image-slot fs-12 d-flex-around-center  h_200p w_200p" style="background-color: #f5f7fa">
                            <i class="el-icon-picture-outline">单位证件</i>
                        </div>
                    </el-image>
                    <el-image
                        :src="auditList.attnSupportingMaterial"
                        alt="经办人证件"
                        class="mr-28 h_200p w_200p"
                        :preview-src-list="[auditList.enterpriseSupportingMaterial, auditList.attnSupportingMaterial]"
                    >
                        <div slot="error" class="image-slot fs-12 d-flex-around-center h_200p w_200p" style="background-color: #f5f7fa">
                            <i class="el-icon-picture-outline">经办人证件</i>
                        </div>
                    </el-image>
                </div>
                <div class="mt-12 d-flex flex-column fs-14">
                    <div class="my-12">
                        <span class=" mr-12">当前状态：</span>
                        <!--            <span  v-if="auditList.recruitReviewStatus == 0" style="color: blue">待审核</span>-->
                        <!--            <span  v-else-if="auditList.recruitReviewStatus == 1" style="color: green">审核通过</span>-->
                        <!--            <span  v-else-if="auditList.recruitReviewStatus == 2" style="color: red">审核不通过</span>-->
                        <!--            <span  v-else>暂无数据</span>-->
                        <span>{{ auditList.reviewStatus ? auditList.reviewStatus : '暂无数据' }}</span>
                    </div>
                    <div>
                        <div>
                            <span class=" mr-12">审核人员：</span>
                            <span>{{ auditList.auditName ? auditList.auditName : '暂无数据' }}</span>
                        </div>
                    </div>
                </div>
                <div class="mt-12 ">
                    <div>
                        <span class="fs-14 mr-12">审核选择</span>
                        <el-radio-group v-model="isPass">
                            <el-radio :label="true">通过</el-radio>
                            <el-radio :label="false">不通过</el-radio>
                        </el-radio-group>
                    </div>
                    <div>
                        <Input
                            v-if="isPass === false"
                            style="width: 300px;margin-left: 70px;margin-top: 12px"
                            v-model="auditFail"
                            maxlength="200"
                            show-word-limit
                            type="textarea"
                            :rows="4"
                            placeholder="输入不通过的原因"
                        />
                        <Button type="primary" class="w_100p h_30p" style="margin-left: 70px;margin-top: 12px;display: block" @click="submitForReview" :loading="buttonLoading">
                            提交
                        </Button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { getJobDetailsAPI, getAuditProveDetailsAPI, submitForJobReviewAPI } from '../../../api/bys/recruitmentManagement';
import { updateVal } from '@/util/ObjectUtil';

export default {
    data() {
        return {
            info_open: true,
            positionId: '',
            boxloading1: false,
            boxloading2: false,
            boxloading3: false,
            isShow: true,
            status: '',
            reason: '',
            jobDescription: '',
            generalRegulationsID: '',
            buttonLoading: false,
            skillTag: [],
            chapterContentList: {
                // education: "本科生毕业",//学历要求
                // enterpriseAttnName: "企业经办人名称",//企业经办人名称
                // enterpriseName: "企业名称",//企业名称
                // major: "计算机类通信类电子信息类控制科学类自动化类",//专业要求
                // positionDesc: "职位描述",//职位描述
                // positionName: "中兴5G网络优化工程师",//职位名称
                // positionType: "网络优化工程师",//职位类别
                // publishTime: "2023-11-05 23:07",//职位发布时间
                // recruitNum: 50,//招聘人数
                // recruitUnit: "河南明和通信技术有限公司",//招聘单位（招聘企业）
                // salaryRange: "6k-8k",//月薪范围
                // skill: "java",//技能标签
                // workCity: "河南郑州",//工作城市
                // workNature: "全职"//工作性质
            }, //职位概览列表
            auditList: {
                enterpriseSupportingMaterial: '../../../assets/no-open.png', //单位证件
                attnSupportingMaterial: '../../../assets/no-open.png', //经办人证件
                auditName: '', //审核人员
                reviewStatus: '' //审核状态
            },
            isPass: true,
            auditFail: '',
            enterpriseDetail: {
                businessField: '',
                fullAddress: '',
                introduction: '',
                locationCity: '',
                locationProvince: '',
                netsignIndustry: '',
                officialWebsite: '',
                unitIndustry: '',
                unitName: '',
                unitQuality: '',
                unitType: ''
            }
        };
    },
    computed: {},
    mounted() {
        this.getJobDetails();
        this.getAuditProveDetails();
    },
    created() {
        this.positionId = this.$route.query.id;
    },

    methods: {
        //展开折叠
        openOrClose() {
            this.info_open = !this.info_open;
        },
        getJobDetails() {
            console.log(this.positionId);
            getJobDetailsAPI({
                positionAuditId: this.positionId
            }).then(res => {
                this.chapterContentList = res?.result || '';
                updateVal(this.enterpriseDetail, res?.result.enterpriseDetail);
                console.log(this.chapterContentList, '职位详情');
            });
        },
        getAuditProveDetails() {
            getAuditProveDetailsAPI({
                positionId: this.positionId
            }).then(res => {
                console.log(res, '证明材料');
                this.auditList = res?.result || '';
            });
        },
        submitForReview() {
            this.$confirm('您确定提交该审核吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    submitForJobReviewAPI({
                        positionId: this.positionId,
                        isPass: this.isPass,
                        failReason: this.auditFail
                    }).then(res => {
                        if (res.success) {
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            this.buttonLoading = false;
                            this.$router.back(); //返回主页面
                        } else {
                            this.$message({
                                type: 'error',
                                message: '提交失败，请重新提交或联系管理员!'
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消提交'
                    });
                });
        }
    }
};
</script>
<style scoped>
.job-overview {
    //display: grid;
    //grid-template-columns: repeat(2, 1fr);
    //grid-row-gap: 10px;
    margin-top: 12px;
}

.job-description div:not(:first-child) {
    margin-top: 12px;
}

.audit-status {
    font-size: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-row-gap: 20px;
}
.titleStyle {
    border-bottom: 1px solid #d1d1d1;
    height: 40px;
    font-size: 16px;
    font-weight: bold;
    line-height: 40px;
}
.titleItemStyle {
    height: calc(100% - 40px);
}
.skillTag {
    height: 100px;
    color: #4f4f4f;
    line-height: 25px;
    color: white;
    white-space: normal;
    flex-wrap: wrap;
}
.skillTagItem {
    width: 80px;
    height: 25px;
    border-radius: 4px;
    background-color: #0087fa;
}
.infor_init_heignt {
    height: 20px;
    overflow: hidden;
}
.infor_height {
    height: auto;
}
</style>
